<template>
    <div v-loading="loading">
        <el-card body-style="padding:10px" class="box-card">
            <!-- <el-input clearable placeholder="请输入内容" size="small" style="width: 200px;" v-model="query.keyword"></el-input> -->
            <el-input clearable placeholder="请输入用户ID" size="small" style="width: 200px;" v-model="query.user_id"></el-input>
            <el-input clearable placeholder="请输入用户名" size="small" style="width: 200px;"
                v-model="query.user_name"></el-input>
            <el-input clearable placeholder="请输入内容" size="small" style="width: 200px;" v-model="query.content"></el-input>

            <!-- <span style="color: #555;margin-left: 30px;margin-right: 10px;">是否已删除</span>
            <el-switch @change="disableFun" active-color="#13ce66" inactive-color="#ff4949" v-model="disable"></el-switch> -->
            <el-select placeholder="选择是否已删除" v-model="query.contain_delete" @change="page=1;init()">
                <el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in statusList"></el-option>
            </el-select>
            <el-date-picker v-model="times" type="daterange" range-separator="至" start-placeholder="开始日期"
                value-format="yyyy-MM-dd" end-placeholder="结束日期" @change="start_timeFun">
            </el-date-picker>
            <el-button @click="page=1;init()" size="small" type="primary" style="margin-left: 30px;">搜索</el-button>
            <el-button @click="page=1;init()" icon="el-icon-refresh-right" size="small" type="primary"
                style="margin-left: 2px;">刷新</el-button>
        </el-card>

        <el-card body-style="padding:10px" class="box-card mt-10">
            <div class="scroll-window" ref="scrollContainer" style="height: 600px;overflow: auto;">
                <div v-if="data.length > 0">
                    <el-card :key="index" class=" marginTop20" style v-for="(item, index) in data">
                        <UserInfo :user_id="item.user_id" :userInfos="item.author" v-if="item.user_id"></UserInfo>
                        <div class="flex" style="margin:20px 0 ;margin-right: 30px;">
                            <div class="size12 color999">发布时间： {{ item.created_at }}</div>
                            <div class="size12 color999 marginLeft20">浏览量 {{ item.viewed }}</div>
                        </div>
                        <div class="marginLeft10" style="width: 80%;">
                            <div class="contents marginTop10 omit1" style="font-size: 40rpx;">{{ item.content }}</div>
                            <el-row :gutter="10">
                                <el-col :key="key" :span="4.5" class="mt-5" v-for="(value, key) in item.media_urls">
                                    <el-image :preview-src-list="item.media_urls" :src="value" class="radius10" fit="cover"
                                        style="width:220px;height:220px;border-radius: 10px;"></el-image>
                                </el-col>
                            </el-row>
                        </div>

                        <div style="display: flex;">
                            <el-button size="mini" slot="reference" type="success"
                                style="padding: 0 10px;height: 32px;margin-top: 10px;" @click="toDetails(item.creation_id)"
                                v-permission="['ADMIN', 'POSTS_DETAILS']">详情</el-button>

                            <div v-permission="['ADMIN', 'POSTS_FALSE_DELETE']">
                                <el-popconfirm @confirm="softDel(item.creation_id)" title="确定要删除这个数据吗？"
                                    v-if="query.contain_delete == 0">
                                    <el-button size="small" slot="reference" style="margin-left: 10px;margin-top: 10px;"
                                        type="danger">软删除</el-button>
                                </el-popconfirm>

                                <el-button v-else @click="restore(item.creation_id)" size="small" type="primary"
                                    style="margin-left: 10px;margin-top: 10px;">恢复</el-button>
                            </div>

                            <el-popconfirm @confirm="hardDel(item.creation_id)" title="确定要删除这个数据吗？"
                                v-if="query.contain_delete == 0">
                                <el-button size="small" slot="reference" style="margin-left: 10px;margin-top: 10px;"
                                    type="danger" v-permission="['ADMIN', 'POSTS_TRUE_DELETE']">硬删除</el-button>
                            </el-popconfirm>
                        </div>
                    </el-card>
                </div>

            </div>
        </el-card>
        <!-- 分页组件 -->
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>
    </div>
</template>
      
<script>
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
export default {
    name:"post-details-list",
    mixins: [initData],
    components: {
        medium
    },
    watch: {
    '$route'(to, from) {
      console.log('路由参数发生变化')
      if (this.$route.query.name) {
        this.query.user_name = this.$route.query.name
      }
      this.beforeInit()
    }
  },
    data() {
        return {
            query: {
                content: '',
                contain_delete: 0, //0未删除，2已删除
                user_id: '',
                user_name: ''
            },
            times: '',
            visible: false,
            loading: false,
            disable: false,
            images: [],
            statusList: [
                {
                    name: "未删除",
                    value: 0
                },
                {
                    name: "已删除",
                    value: 2
                },
            ]
        }
    },
    mounted() {
        if(this.$route.query.name){
     this.query.user_name = this.$route.query.name
    }
        //this.getworksList()
        this.beforeInit()
    },
    methods: {
        start_timeFun(e) {
            console.log(e)
            this.query.start_time = e[0]
            this.query.end_time = e[1]
        },
        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },
        beforeInit() {
            this.url = '/creation/index?creation_type=infomation'
            this.init() //重新请求数据
        },

        // del(id) {
        //     this.$request.del('/label/delete/' + id).then((res) => {
        //         this.$message.success('删除成功')
        //         this.init() //重新请求数据

        //     })
        // },

        imagesFun(images) {
            this.visible = true
            this.images = images
            console.log(images)
        },
        closeBox() {
            this.type = 'create'
            this.visible = false

        },
        toDetails(id) {
            this.$router.push({ path: "/post-list-details?id=" + id });
        },

        softDel(id) {
            this.$request.del('/creation/delete_soft/' + id).then((res) => {
                this.$message.success('删除成功')
                this.init()
            })
        },

        hardDel(id) {
            this.$request.del('/creation/delete_real/' + id).then((res) => {
                this.$message.success('删除成功')
                this.init()
            })
        },
        restore(id) {
            this.$request.put('/creation/delete_soft_recover/' + id).then((res) => {
                this.$message.success('恢复成功')
                this.init()
            })
        },
        disableFun(res) {
            console.log(res, '321')
            this.query.contain_delete = res == true ? 2 : 0
            this.init() //重新请求数据
        },



    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}

.flex {
    display: flex;
}

.size12 {
    font-size: 12px;
    color: #999;
}

.marginLeft20 {
    margin-left: 20px;
}

.marginTop20 {
    margin-top: 20px;
}</style>